<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>菜单列表</title>
	<link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/font-awesome/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="${request.contextPath}/plugins/select2/select2.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/animate.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/style.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/common.css">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-xs-12">
				<div class="ibox">
					<div class="ibox-content">
						<form class="form-inline m-b-lg">
							<div class="form-group">
								<#if permissions?seq_contains('system:sysmenu:save')>
									<button class="btn btn-sm btn-info" onclick="openAdd()" type="button">
										<i class="fa fa-plus"></i> 创建菜单
									</button>
								</#if>
								<button id="expandAllBtn" type="button" class="btn btn-sm btn-success">
										<i class="fa fa-exchange"></i>展开/折叠
								</button>
							</div>
						</form>
						<div class="table-responsive">
							<table id="table" class="table table-striped table-bordered table-hover">
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 通用js引入 -->
	<script src="${request.contextPath}/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="${request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script src="${request.contextPath}/plugins/layer/layer.min.js"></script>
	<script src="${request.contextPath}/plugins/laydate/laydate.js"></script>
	<script src="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/jquery.validate.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/messages_zh.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap-table/extensions/tree/bootstrap-table-tree.js"></script>
	<script src="${request.contextPath}/plugins/blockUI/jquery.blockUI.js"></script>
	<script src="${request.contextPath}/hadmin/js/content.js"></script>
	<script src="${request.contextPath}/hadmin/js/common.js?v=0.9"></script>
	<script>
		var editFlag = '${permissions?seq_contains("system:sysmenu:edit")}';
		var deleteFlag = '${permissions?seq_contains("system:sysmenu:remove")}';
		// 树形表格参数设置
		var table = $('#table').bootstrapTreeTable({
			code: "id",                                 				// 用于设置父子关系
			parentCode: "pid",                     							// 用于设置父子关系
			uniqueId: "id",																			// 主id值
			type: 'post',                                       // 请求方式（*）
			url: '${request.contextPath}/system/sysmenu/page',  // 请求后台的URL（*）
			ajaxParams: {},                     								// 请求数据的ajax的data属性
			rootIdValue: null,                   								// 设置指定根节点id值
			height: 0,                             							// 表格树的高度
			expandColumn: 1,                 										// 在哪一列上面显示展开按钮
			striped: false,                           					// 是否显示行间隔色
			bordered: false,                         						// 是否显示边框
			//toolbar: '#toolbar',                     					// 指定工作栏
			showSearch: false,                     							// 是否显示检索信息
			showRefresh: false,                   							// 是否显示刷新按钮
			showColumns: false,                   							// 是否显示隐藏某列下拉框
			expandAll: true,                       							// 是否全部展开
			expandFirst: true,                   								// 是否默认第一级展开--expandAll为false时生效
			columns: [
				{
					field: 'selectItem',
					radio: true
				},
				{
					field: 'menuName',
					title: '菜单名称',
					align: 'left',
					formatter: function(value, row, index) {
						if (row.icon == null || row.icon == "") {
							return row.menuName;
						} else {
							return '<span class="nav-label">' + row.menuName + '</span>';
						}
					}
				},
				{
					field: 'url',
					title: '访问地址',
					align: 'left',
					formatter: function(value, row, index) {
						if (row.url == null || row.url == "" ) {
							return '--';
						} else {
							return row.url;
						}
					}
				},
				{
					field: 'permissions',
					title: '权限标识',
					align: 'left',
					formatter: function(value, row, index) {
						if (row.permissions == null || row.permissions == "" ) {
							return '--';
						} else {
							return row.permissions;
						}
					}
				},
				{
					field: 'sort',
					title: '菜单排序',
					align: 'left',
				},
				{
					field: 'deep',
					title: '菜单深度',
					align: 'left',
				},
				{
					field: 'deep',
					title: '菜单类型',
					align: 'left',
					formatter:function(value, row, index){
						switch (row.deep){
							case 1 : return '<span class="label label-primary">目录</span>';
							case 2 : return '<span class="label label-success">菜单</span>';
							case 3 : return '<span class="label label-warning">按钮</span>';
						}
					}
				},
				{
					align: "left",
					title: '操作',
					formatter: function(value, row, index) {
						var actions = [];
						if (editFlag == 'true') {
							actions.push(' <button class="btn btn-info btn-xs" onclick="openEdit(\'' + row.id + '\')" type="button"><i class="fa fa-pencil-square-o"></i> 编辑</button>')
						}
						if (deleteFlag == 'true') {
							actions.push(' <a class="btn btn-danger btn-xs" data-trigger="ajax" data-submit-url="${request.contextPath}/system/sysmenu/delete?id='+ row.id +'" data-confirm="您确定要删除该条记录吗?"><i class="fa fa-times"></i> 删除</a>');
						}
						return actions.join('');
					}
				}
			],
			responseHandler: responseHandler,
			onLoadSuccess: onLoadSuccess
		})

		// 请求获取数据后处理回调函数，校验异常状态提醒
		function responseHandler(res) {
			return res;
		}

		// 当所有数据被加载时触发
		function onLoadSuccess(data) {

		}

		// 刷新表格
		function refreshTable() {
			$("#table").bootstrapTreeTable('refresh');
		}

		// tree表格树 展开/折叠
		var expandFlag;
		$("#expandAllBtn").click(function() {
			var dataExpand = isEmpty(table.expandAll) ? true : table.expandAll;
			expandFlag = isEmpty(expandFlag) ? dataExpand : expandFlag;
			if (!expandFlag) {
				$('#table').bootstrapTreeTable('expandAll');
			} else {
				$('#table').bootstrapTreeTable('collapseAll');
			}
			expandFlag = expandFlag ? false: true;
		})

		// 打开添加页面
		function openAdd() {
			openPage('添加菜单', '${request.contextPath}/system/sysmenu/add');
		}

		// 打开编辑页面
		function openEdit(id) {
			openPage('编辑菜单', '${request.contextPath}/system/sysmenu/edit/' + id);
		}

		// 删除单个记录(动态绑定js渲染的节点元素)
		$("body").delegate("*[data-trigger='ajax']", "click", function() {
			var dataUrl = $(this).attr("data-submit-url");
			var dataConfirm = $(this).attr("data-confirm");
			$.confirm({
				type: 'red',
				closeIcon: true,
				title: '警告',
				content: dataConfirm ? dataConfirm : '确认操作?',
				buttons: {
					'确认': {
						btnClass: 'btn-blue',
						action: function(){
							$.post(dataUrl,{},function(data){
								if(data.code==200){
									window.location.reload();
									layer.msg(data.msg, { icon : 1 });
								}else{
									layer.msg(data.msg, { icon : 2 });
								}
							});
						}
					},
					'取消':{}
				}
			});
		})
	</script>
</body>
</html>
